{% extends "layout.html" %}
{% block content %}
<div class="container">
    <br />
    <div class="row">
        <div class="col-md">
            <h3>Organizations
                {% if current_user.is_authenticated and current_user.is_admin %}
                <a href="{{ url_for('organization_bp.form') }}">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                </a>
                {% endif %}
            </h3>
        </div>
        <div class="col-md">
            <form method="GET" id="searchForm">
                <div class="form-row align-items-center float-right">
                    <div class="col-auto">
                        <label class="sr-only" for="inlineFormInput">Search</label>
                        <input type="text" class="form-control mb-2" id="inlineFormInput" name="name" placeholder="Search">
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-secondary mb-2">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div id="list-organizations"></div>
</div><!-- /.container -->
<script>
$(document).ready(function() {
    var filters = [];
    organization_name = getUrlParameter('name');
    if (typeof organization_name !== 'undefined') {
        filters.push({"name": "name", "op": "ilike", "val": "%"+organization_name+"%"});
    }
    organization_type = getUrlParameter('type');
    if (typeof organization_type !== 'undefined') {
        filters.push({"name": "organization_type", "op": "ilike", "val": "%"+organization_type+"%"});
    }
    $.ajax({ // Get the list of organizations
        url: "{{ url_for('organizationapi0.organizationapi',) }}" + "?results_per_page=50",
        data: {"q": JSON.stringify({"filters": filters})},
        dataType: "json",
        contentType: "application/json",
        success: function(organizations) {
            organizations.objects
            .sort(function (a, b) {
                return a.last_updated < b.last_updated;
            })
            .map(function (organization) {
                var div_organization = $("<div>");
                div_organization.append('<ol class="breadcrumb">' +
                                        '<li class="breadcrumb-item active">' +
                                        '<a href="/organization/' + organization.name
                                        + '">' + organization.name + '</a></li></ol>');
                $('#list-organizations').append(div_organization);

                var div_organization_columns = $("<div>", {"class": "card-columns"});

                var filters = [{"name": "organization_id", "op": "eq", "val": organization.id}];
                $.ajax({
                    url: "{{ url_for('projectapi0.projectapi',) }}",
                    data: {"q": JSON.stringify({"filters": filters})},
                    dataType: "json",
                    contentType: "application/json",
                    success: function(projects) {
                        projects.objects
                        .sort(function (a, b) {
                            return a.last_updated < b.last_updated;
                        })
                        .map(function (project) {
                            var cardHTML = cardProjectTemplate({
                                'logo': project.logo,
                                'project_name': project.name,
                                'project_description': project.short_description,
                                'project_details': '/project/'+project.name
                             });
                             div_organization_columns.append(cardHTML);
                        });
                    }
                });
                $('#list-organizations').append(div_organization_columns);
            })
        }
    });
});
</script>
{% endblock %}
